
<!DOCTYPE html>
<html> 
	<head> 
		<title>Graph drawer</title> 
		<meta charset="utf-8" /> 
		
		<meta name="keywords" content="mathematical graph, graph theory, drawing, nice drawing, force-based, approach, algorithm, javascript, layout">
		<meta name="description" content="Graph drawer is a tool for drawing Mathematical graphs. You define the graph by number of vertices and by edges between them.">
		<!--<meta name="viewport" content="user-scalable=no, width=device-width" />-->
		
		
		<link rel="stylesheet" type="text/css" href="style.css" />
		 <script type="text/javascript" src="http://platform.linkedin.com/in.js">
			api_key: kd55r8vt584t
			onLoad: onLinkedInLoad
			authorize: true
		</script>
       
        
		<script type="text/javascript" src="Point.js"></script> 
		<script type="text/javascript" src="Vertex.js"></script> 
		<script type="text/javascript" src="Grapher2D.js"></script> 
		<script type="text/javascript" src="Graph.js"></script> 
		<script type="text/javascript" src="Control.js"></script>
		<script type="text/javascript" src="slider.js"></script>
		
		
		<script type="text/javascript">		
			function onLinkedInLoad() {
			  IN.Event.on(IN, "auth", function() {onLinkedInLogin();});
			  IN.Event.on(IN, "logout", function() {onLinkedInLogout();});
			}
			function onLinkedInLogin(){
			IN.API.Connections("me")
					.fields("id", "firstName", "lastName", "pictureUrl", "publicProfileUrl")
					.result(function(result, metadata) {
					   setConnections(result.values, metadata);
					});
			}
			function setConnections(connections) {
			  i = 0;
			  pics =[];
			  /*
			  var connHTML = "";
			for (id in connections) {
			if (connections[id].hasOwnProperty('pictureUrl')) {
			  connHTML = connHTML + "<img align=\"baseline\" src=\"" + connections[id].pictureUrl + "\"></a>";
			}  else {
			  connHTML = connHTML + "<img align=\"baseline\" src=\"http://static02.linkedin.com/scds/common/u/img/icon/icon_no_photo_80x80.png\"></a>";
			}
			}
			document.getElementById("connectionsdata").innerHTML = connHTML;
			*/
			  for (id in connections) {
				if (connections[id].hasOwnProperty('pictureUrl')) {
				 pics.push(connections[id].pictureUrl);
				}  else {
				 pics.push("http://static02.linkedin.com/scds/common/u/img/icon/icon_no_photo_80x80.png");
				}
				i++;
			  }
			  onLoad(pics);
			}
		</script>
		
	</head> 
	
	<body > 
		<div style="position:absolute; z-index:1; margin:15px; right:0px; width:230px;">
			<h3>Controls</h3>
			
			<span class="btn control">
				<input type="checkbox" checked="yes" onclick="changePhysics();" id="phBTN"></input>
				<label for="phBTN">physics</label>
			</span>
			
			<span class="btn control">
				<input type="checkbox" onclick="change3D(this);" id="tdBTN"></input>
				<label for="tdBTN">3D mode</label>
			</span>
			
			<span class="btn control">
				<input type="checkbox" onclick="changeLabels();" id="lbBTN"></input>
				<label for="lbBTN">show labels</label>
			</span>
			
			
			<div id="repSL" class="slider">	<div class="handle control">repulsion</div></div>
			<div id="attSL" class="slider">	<div class="handle control">attraction</div></div>
			
			<input value="Draw bipartitly" type="submit" onclick="drawBipartitly(this);" class="btn control" style="font-size:15;"></input>
			<!--<div id="damSL" class="slider">	<div class="handle">damping</div></div>-->
			
			
			<!--
			<a href="http://plus.google.com" target="_new">
				<img src="img/gg.png" alt="Chrome App" title="Chrome App" />
			</a>
			-->


			<iframe width="100%" height="55" id="URLcont" style="border:none;"></iframe>
			
		
		</div>
	
		
		<svg  id="svgc" style="width:100%; height:460px;"  version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
		</svg>
		
		<div id="inPanel" style="margin-bottom:15px;">
			<input value="3:1-2,2-3,3-1" type="text" maxlength="2048" id="inText"></input>
			<input value="Draw"  type="submit" onclick="rebuildURL();" class="btn control" style="font-size:18px;"></input>
		</div>

		<h2>Examples</h2>

<div id="graphs">
	
		<a href="#2:1-2">Stick</a>
	
		<a href="#3:1-2,2-3,3-1">Triangle</a>
	
		<a href="#8:1-2,2-3,3-4,4-5,5-6,6-7,7-8,8-1">Ring C<sub>8</sub></a>
	
		<a href="#4:1-2,2-3,3-1,1-4,2-4,3-4">Tetrahedron</a>
		
		<a href="#8:1-2,2-3,3-4,4-1,5-6,6-7,7-8,8-5,1-5,2-6,3-7,4-8">Cube</a>
		
		<a href="#6:1-2,2-3,3-4,4-1,1-5,2-5,3-5,4-5,1-6,2-6,3-6,4-6">Octahedron</a>
		
		<a href="#12:1-2,2-3,3-4,4-5,5-1,6-7,7-8,8-9,9-10,10-6,1-11,2-11,3-11,4-11,5-11,6-12,7-12,8-12,9-12,10-12,1-6,6-2,2-7,7-3,3-8,8-4,4-9,9-5,5-10,10-1">Icosahedron</a>
	
		<a href="#20:1-2,2-3,3-4,4-5,5-1,6-7,7-8,8-9,9-10,10-6,1-11,2-12,3-13,4-14,5-15,6-16,7-17,8-18,9-19,10-20,11-16,16-12,12-17,17-13,13-18,18-14,14-19,19-15,15-20,20-11">Dodecahedron</a>
	
		<a href="#11:1-2,2-3,3-4,4-5,5-1,6-7,7-8,8-9,9-10,10-6,11-1,11-2,11-3,11-4,11-5,11-6,11-7,11-8,11-9,11-10">Diabolo</a>
		
		<a href="#7:1-2,2-3,3-4,4-5,5-6,6-1,1-7,2-7,3-7,4-7,5-7,6-7,2-4,4-6,6-2">Fano plane</a>
		
		<a href="#16:1-2,2-3,3-4,4-1,5-6,6-7,7-8,8-5,1-5,2-6,3-7,4-8,9-10,10-11,11-12,12-9,13-14,14-15,15-16,16-13,9-13,10-14,11-15,12-16,1-9,2-10,3-11,4-12,5-13,6-14,7-15,8-16">4D cube</a>
		
		<a href="#18:1-2,2-3,3-4,4-5,5-6,6-1,1-7,7-2,2-8,8-3,3-9,9-4,4-10,10-5,5-11,11-6,6-12,12-1,7-8,8-9,9-10,10-11,11-12,12-7,13-14,14-15,15-16,16-17,17-18,18-13,1-13,13-2,2-14,14-3,3-15,15-4,4-16,16-5,5-17,17-6,6-18,18-1">The Drum (???)</a>
		
		<a href="#12:1-2,2-3,3-4,4-5,5-6,6-1,1-7,2-8,3-9,4-10,5-11,6-12">Benzene</a>
		
		<a href="#18:1-2,2-3,3-4,4-5,5-6,6-1,1-7,2-8,3-9,4-10,5-11,6-12,1-13,2-14,3-15,4-16,5-17,6-18">Cyclohexane</a>
		
		<a href="#5:1-2,1-3,1-4,1-5">Methane</a>
		
		<a href="#16:1-2,2-3,4-5,5-6,7-8,8-9,1-4,4-7,2-5,5-8,3-6,6-9,3-10,6-11,9-12,9-14,8-15,7-16,10-11,11-12,12-13,13-14,14-15,15-16">Grid 4x4</a>

		<a href="#10:1-3,3-5,5-2,2-4,4-1,6-10,6-7,7-8,8-9,9-10,1-6,2-7,3-8,4-9,5-10">Petersen graph</a>
		
		<a href="#14:1-2,2-3,3-4,4-5,5-6,6-7,7-8,8-9,9-10,10-11,11-12,12-13,13-14,14-1,1-6,3-8,5-10,7-12,9-14,11-2,13-4">Heawood graph</a>
		
		<a href="#8:1-2,1-3,1-4,1-5,5-4,4-3,3-2,3-6,4-6,1-7,4-7,3-7,2-7,5-7,6-7,3-8,4-8,1-8">Spiky tetrahedron</a>
		
		<a href="#6:1-4,1-5,1-6,2-4,2-5,2-6,3-4,3-5,3-6">K<sub>3,3</sub></a>
		
		<a href="#5:1-2,1-3,1-4,1-5,2-3,2-4,2-5,3-4,3-5,4-5">K<sub>5</sub></a>
</div>
		<div id="connectionsdata"></div>
		<div style="width:600px; display:none;" id="embed">
			<div style="width:360px; float:left; text-align:left;">
			<textarea rows="4" cols="36" id="wCode">Here is the code.</textarea>
			</div>
		</div>

		<br />
		<br />

		

	</body> 
</html>